<style lang="less" scoped>
  .loop_text_wrap {
    width: 100%;
    height: 100%;
    line-height: 100%;
    overflow: hidden;
    span {
      display: inline-block;
      white-space: nowrap;
      color: var(--color);
      font-size: var(--size);
      &.ani {
        animation: loop_ani var(--time) linear 1s infinite;
      }
      @keyframes loop_ani {
        0% {
          transform: translateX(0px);
        }
        20% {
          transform: translateX(0px);
        }
        70% {
          transform: translateX(var(--moveDis));
        }
        95% {
          transform: translateX(var(--moveDis));
        }
        100% {
          transform: translateX(0px);
        }
      };
    }
  }
</style>

<template>
  <div class="loop_text_wrap" ref="wrap">
    <span
      :class="{ani: scrollDis}"
      :style="{
        '--color': color,
        '--size': size + 'px',
        '--moveDis': -scrollDis + 'px',
        '--time': time + 's',
      }"
      ref="text"
    >{{text}}</span>
  </div>
</template>

<script>
  /* 
    text 文本内容
    color 文本颜色
    size 文本大小
  */
  export default {
    name: "LoopText",
    props: ['text', 'color', 'size'],
    data() {
      return {
        scrollDis: 0,
        time: 0,
      }
    },
    mounted() {
      this.$nextTick(() => {
        const scrollDis = this.$refs.text.getBoundingClientRect().width - this.$refs.wrap.clientWidth;
        this.scrollDis = scrollDis > 0 ? scrollDis : 0;
        this.time = this.scrollDis * 80 / 1000;
      });
    },
  };
</script>
